<template>
	<view>
		<view class="navbar">
			<u-navbar :is-back="false" :background="background">
				<view class="d-flex a-center ml-2">
					<image class="login_img_img mr-2"
						:src="User.avator_img?User.avator_img:'../../static/images/tabBar/ecmoban_logo.png'"
						@click="home_user" mode=""></image>
					<text class="font-35">{{merchant.seller_name}}</text>
				</view>
			</u-navbar>
		</view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll"
			@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">

			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>

			<view class="" v-else>
				<view class="deep">
					<view class="earnings rounded-20 px-2 m-2 py-3 text-white" v-if="earnings">
						<view class="turntoother clearfix">
							<view @click="ewmTo" class="item">
								<view class="ico1">
									<image src="../../static/images/new/ewm.png" mode="widthFix"></image>
								</view>
								<view class="txt">
									二维码
								</view>
							</view>

							<view class="item">
								<navigator class='miniprogram-btn' target="miniProgram" open-type='navigate'
									app-id='wxe4f703cef420efe3'
									:path="'pages/shop/shopHome/shopHome?ru_id=' + merchant.id ">
									<view class="ico2">
										<image src="../../static/images/new/dian.png" mode="widthFix"></image>
									</view>

									<view class="txt">
										店铺
									</view>
								</navigator>


							</view>
						</view>

						<view class="px-4">
							<view class="d-flex my-2 a-center">
								<view class="mr-2 font-35 text-white">实时概括</view>
								<image :src="[eyes_show?close_eyes:open_eyes]" mode="widthFix" class="ps_img mt-1"
									@click="showIcon">
								</image>
							</view>
							<view class="d-flex mt-3">
								<view class="flex-1">
									<view class="text-ffebeb font-28">今日订单数</view>
									<view class="font-33 font-weight mt-2 font-lg text-white">
										{{eyes_show?'****':earnings.order_stats[1].value}}
									</view>
								</view>
								<view class="flex-1" @click="go_store" v-if="User.is_merchant">
									<view class="text-ffebeb font-28">可用店铺余额 ></view>
									<view class="font-33 font-weight mt-2 font-lg text-white">
										{{eyes_show?'****':earnings.store_account.seller_money}}
									</view>
								</view>
							</view>
						</view>
						<view class="d-flex mt-3 px-4">
							<view class="flex-1">
								<view class="text-ffebeb font-28">今日支付金额</view>
								<view class="mt-1 font-33 font-weight">
									{{eyes_show?'****':earnings.order_stats[0].value}}
								</view>
							</view>
							<view class="flex-1">
								<view class="text-ffebeb font-28">昨日订单收益</view>
								<view class="mt-1 font-33 font-weight">
									{{eyes_show?'****':earnings.order_stats[4].value}}
								</view>
							</view>
							<view class="flex-1">
								<view class="text-ffebeb font-28">昨日支付金额</view>
								<view class="mt-1 font-33 font-weight">
									{{eyes_show?'****':earnings.order_stats[3].value}}
								</view>
							</view>
						</view>
					</view>
					<!-- 常用应用 -->
				</view>

				<adhibition :is_merchant="User.is_merchant" :is_view="kehu_view" :openid="User.open_id"
					:ru_id="merchant.id"></adhibition>
				<view class="font-35 m-2 py-1 font-weight">动态</view>
				<view class="m-2 p-3 bg-white rounded-20" v-for="(item,index) in orderArray" :key='index'
					@click="orderTo(item)">
					<view class="d-flex j-sb">
						<!-- <view class="font-32 font-weight">亲,&nbsp;您有一笔{{item.label_order_status}}订单信息</view> -->
						<view class="font-weight" style="color: #ff6600;">
							<u-parse :html="item.status"></u-parse>
						</view>
						<!-- <view class="">{{item.create_time}}</view> -->
						<view class="">{{timer(item.create_time.replace(/-/g, '/'))}}</view>
					</view>
					<view class="p-2 d-flex rounded-15 bg-f6 mt-2 a-center">
						<view class="dynamic_img">
							<image class="dynamic_img rounded-20" :src="item.goods_items[0].img.url" mode=""></image>
						</view>
						<view class="ml-2">
							<view class="ellipsis-1 text-000 font-28">
								{{item.goods_items[0].goods_name}}
							</view>
							<view class="text-999 font-26">共{{item.goods_number}}件，合计：{{item.formated_total_fee}}
							</view>
						</view>
					</view>
					<view class="j-sb a-center d-flex">
						<view class="">
							<view class="mt-2 font-28 text-666">
								姓名：{{item.consignee}}
							</view>
							<view class="mt-1 font-28 text-666">
								电话：{{item.mobile}}
							</view>
							<view class="mt-1 font-28 text-666">
								支付方式：{{item.pay_name}}
							</view>
						</view>
						<image class="d-block" v-if="item.zhufahuo == 1"
							style="width: 170rpx;height: 60rpx;transform: rotate(-20deg);"
							src="../../static/zhufahuo.png" mode=""></image>
					</view>

				</view>

				<view class="pb-2" v-if="!orderArray.length<=0">
					<view class="" v-if="orderArray.length==total" @click="loadmores">
						<u-loadmore status="nomore" icon-type="circle" />
					</view>
					<view class="" v-else>
						<u-loadmore status="loading" icon-type="circle" />
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import Adhibition from "../../components/adhibition/adhibition.vue"
	export default {
		onShareAppMessage() {
			return {
				from: 'menu'
			}
		},
		components: {
			Adhibition
		},
		data() {
			return {
				close_eyes: "../../static/images/home/close-eyes.png",
				open_eyes: "../../static/images/home/open-eyes.png",
				User: {}, // 登录信息
				earnings: null, // 收益
				merchant: {}, // 店铺信息
				eyes_show: false, // 睁眼
				background: {
					backgroundColor: '#ffffff',
				},
				today_order: 0,
				scrollHeight: 0, // 自适应高度
				orderArray: "", // 订单列表

				more: 1, // 第几页
				count: 10, // 条数

				timers: null, // 倒计时

				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				total: 0, // 总条数
				scrollTop: 0,
				kehu_edit: 0,
				kehu_view: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				token: state => state.user.token,
				userInfo: (state) => state.user.userInfo,
			})
		},

		onReady() {
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.navbar').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
						console.log(res)
					})
				}
			})
		},
		onLoad() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
			this.$H.post("v2/store/home/data").then(res => {
				if (res.status.succeed == 1) {
					this.earnings = res.data
					this.today_order = res.data.order_stats[1].value
				}
				if (res.status.error_code == 100) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			})
			this.$H.post("admin/orders/list", {
				pagination: {
					count: this.count,
					page: this.more
				}
			}).then(res => {
				console.log("得出来的数据为", res);
				this.total = res.paginated.total
				if (res.status.succeed == 1) {
					this.orderArray = res.data
				}
			})



			// 店铺信息
			this.$H.post("admin/merchant/info").then(res => {
				console.log("11111111ttttttttttttttt", res);
				this.u_loadmore = false
				this.merchant = res.data || {}
				if (res.data.id) {
					uni.setStorageSync("user_id", res.data.id)
				}
			})
			// 下拉刷新
			this._freshing = false;
		},
		onShow() {
			if (uni.getStorageSync("session")) {
				// 用户信息
				if (uni.getStorageSync("toggle_default")) {
					this.$H.post("admin/user/userinfo").then(res => {
						this.User = res.data || {}
						this.kehu_view = res.data.kehu_view
						this.kehu_edit = res.data.kehu_edit
						uni.setStorageSync("users", res.data)
						console.log("usersssss", res.data)
					})

				} else if (uni.getStorageSync("toggle_demo")) {
					this.$H.post("admin/user/userinfo").then(res => {
						this.User = res.data || {}
						this.kehu_view = res.data.kehu_view
						this.kehu_edit = res.data.kehu_edit
						uni.setStorageSync("users_demo", res.data)
						console.log("usersssss", res.data)
					})
				} else {
					this.$H.post("admin/user/userinfo").then(res => {
						this.User = res.data || {}
						this.kehu_view = res.data.kehu_view
						this.kehu_edit = res.data.kehu_edit
						uni.setStorageSync("users", res.data)
						console.log("usersssss", res.data)
					})
				}
			}
			this.timers = setInterval(() => {
				this.$H.post("admin/orders/list", {
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					if (res.status.succeed == 1) {
						this.orderArray = res.data
					}
				})
			}, 5000)
		},
		methods: {
			...mapMutations(['webUrl']),
			timer(date) {
				//获取js 时间戳  当前 1617689284242
				var time = new Date().getTime();
				var date = new Date(date).getTime()
				//去掉 js 时间戳后三位，与php 时间戳保持一致
				time = parseInt((time - date) / 1000);
				//存储转换值 
				var s;
				if (time < 60 * 1) { //十分钟内
					return '刚刚';
				} else if ((time < 60 * 60) && (time >= 60 * 1)) {
					//超过十分钟少于1小时
					s = Math.floor(time / 60);
					return s + "分钟前";
				} else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
					//超过1小时少于24小时
					s = Math.floor(time / 60 / 60);
					return s + "小时前";
				} else if ((time > 60 * 60 * 24 * 1) && (time <= 60 * 60 * 24 * 7)) {
					//超过1天少于7天
					s = Math.floor(time / 60 / 60 / 24);
					return s + "天前";
				} else if ((time > 60 * 60 * 24 * 7) && (time <= 60 * 60 * 24 * 7 * 4)) {
					//超过1个周少于4周
					s = Math.floor(time / 60 / 60 / 24 / 7);
					return s + "周前";
				} else if ((time > 60 * 60 * 24 * 7 * 4) && (time <= 60 * 60 * 24 * 7 * 4 * 12)) {
					//超过1个月少于12个月
					s = Math.floor(time / 60 / 60 / 24 / 7 / 4);
					return s + "月前";
				} else if (time > 60 * 60 * 24 * 7 * 12) {
					//超过1年
					s = Math.floor(time / 60 / 60 / 24 / 7 / 4 / 12);
					return s + "年前";
				}
			},
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.orderArray.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getData()
					}, 1000)
				}
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部
			loadmores() {
				console.log(this.scrollTop)
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},

			showIcon() {
				this.eyes_show = !this.eyes_show;
			},
			// 订单详情
			orderTo(item) {
				uni.navigateTo({
					url: '/pagesA/virtual/virtual-edit?order_id=' + item.order_id
				})
			},


			ewmTo() {
				uni.navigateTo({
					url: '/pagesB/yaoqingzhuce/yaoqingzhuce'
				})
			},

			getData() {
				this.$H.post("admin/orders/list", {
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					this.orderArray = res.data
					console.log(this.orderArray)
				})
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(() => {
					that.getData()
				}, 1000)
			},
			// 店铺
			go_store() {
				uni.navigateTo({
					url: '/pagesA/store/store-balance'
				})
			},
			// 个人中心
			home_user() {
				uni.navigateTo({
					url: "/pagesA/user/user?token=" + this.token
				})
			}
		},
		onUnload() {
			if (this.timers) {
				clearTimeout(this.timers);
				this.timers = null;
			}
		},
		onHide() {
			if (this.timers) {
				clearTimeout(this.timers);
				this.timers = null;
			}
		}
	}
</script>

<style lang="scss">
	.earnings {
		height: 430upx;
		background-image: url("../../static/images/home/bg_home.png");
		background-size: 100% 480upx;
		background-position: 0 -20upx;
		background-repeat: no-repeat;
		margin-top: 15upx;
		overflow: hidden;
		position: relative;
	}

	.turntoother {
		position: absolute;
		right: 10rpx;
		top: 20rpx;

	}

	.turntoother image {
		width: 56rpx;
	}

	.turntoother .item {
		float: left;
		width: 90rpx;
		text-align: center;
	}

	.turntoother .item .ico1,
	.turntoother .item .ico2 {
		height: 50rpx;
	}

	.turntoother .ico1 image {
		width: 48rpx;
	}

	.turntoother .txt {
		font-size: 28rpx;
		color: #ffffff;
	}

	.login_img_img {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
	}

	.dynamic_img {
		width: 80upx;
		height: 80upx;
	}
</style>